#l {
    animation-name: moveCharacter;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 0.1s;
}

#o {
    animation-name: moveCharacter;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 0.2s;
}

#a {
    animation-name: moveCharacter;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 0.3s;
}

#d {
    animation-name: moveCharacter;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 0.4s;
}

#i {
    animation-name: moveCharacter;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 0.5s;
}

#n {
    animation-name: moveCharacter;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 0.6s;
}

#g {
    animation-name: moveCharacter;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 0.7s;
}

@keyframes moveCharacter {
    0% {
        transform: translateY(0);
    }
    15% {
        transform: translateY(-10%);
    }
    30% {
        transform: translateY(0);
    }
}
